<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <!-- <div class="glass-box2" style="width: 100px;height:50px;"></div> -->
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins glass-box2">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">全部</span>
                        <h5>站点数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">2</h1>
                        <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                        </div>
                        <small>健康</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins glass-box2">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全部</span>
                        <h5>离线站点</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">0</h1>
                        <div class="stat-percent font-bold text-info">0% <i class="fa fa-level-up"></i>
                        </div>
                        <small>健康</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins glass-box2">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">全部</span>
                        <h5>设备数量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">106,120</h1>
                        <div class="stat-percent font-bold text-navy">98% <i class="fa fa-level-up"></i>
                        </div>
                        <small>健康</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins glass-box2">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">全部</span>
                        <h5>未处理告警</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">80,600</h1>
                        <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i>
                        </div>
                        <small>占比</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <img src="/img/shigongtu.png" alt height="100%" width="100%"  />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins glass-border">
                    <div class="ibox-title">
                        <h5>总负荷及碳排放</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-xs btn-white active">天</button>
                                <button type="button" class="btn btn-xs btn-white">月</button>
                                <button type="button" class="btn btn-xs btn-white">年</button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="flot-chart" style="height: 300px">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                            <div class="col-sm-3">
<!--                                <div   style="height: 300px">-->
<!--                                    <div class="flot-chart-content" id="rightorder"></div>-->
<!--                                </div>-->
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins ">9,180</h2>
                                        <small>5号变压器</small>
                                        <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 60%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins">4,422</h2>
                                        <small>3号变压器</small>
                                        <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 48%;" class="progress-bar"></div>
                                        </div>
                                    </li>

                                    <li>
                                        <h2 class="no-margins ">2,346</h2>
                                        <small>4号变压器</small>
                                        <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                 </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins glass-border">
                    <div class="ibox-title">
                        <h5>告警列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                                <tr>
                                    <th>状态</th>
                                    <th>时间</th>
                                    <th>级别</th>
                                    <th>位置</th>
                                    <th>原因</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><small>进行中...</small>
                                    </td>
                                    <td><i class="fa fa-clock-o"></i> 11:20</td>
                                    <td>严重</td>
                                    <td>AA312-8_A相电流_风机/</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 过流</td>
                                </tr>
                                <tr>
                                    <td><small>进行中...</small>
                                    </td>
                                    <td><i class="fa fa-clock-o"></i> 11:20</td>
                                    <td>严重</td>
                                    <td>AA312-8_A相电流_风机/</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 过流</td>
                                </tr>
                                <tr>
                                    <td><small>进行中...</small>
                                    </td>
                                    <td><i class="fa fa-clock-o"></i> 11:20</td>
                                    <td>严重</td>
                                    <td>AA312-8_A相电流_风机/</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 过流</td>
                                </tr>
                                <tr>
                                    <td><small>进行中...</small>
                                    </td>
                                    <td><i class="fa fa-clock-o"></i> 11:20</td>
                                    <td>严重</td>
                                    <td>AA312-8_A相电流_风机/</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 过流</td>
                                </tr>
                                <tr>
                                    <td><small>进行中...</small>
                                    </td>
                                    <td><i class="fa fa-clock-o"></i> 11:20</td>
                                    <td>严重</td>
                                    <td>AA312-8_A相电流_风机/</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 过流</td>
                                </tr>
                                <tr>
                                    <td><span class="label label-primary">已完成</span>
                                    </td>
                                    <td><i class="fa fa-clock-o"></i> 11:20</td>
                                    <td>严重</td>
                                    <td>AA312-8_A相电流_风机/</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 过流</td>
                                </tr>
                                <tr>
                                    <td><small>进行中...</small>
                                    </td>
                                    <td><i class="fa fa-clock-o"></i> 11:20</td>
                                    <td>严重</td>
                                    <td>AA312-8_A相电流_风机/</td>
                                    <td class="text-navy"> <i class="fa fa-level-up"></i> 过流</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
         </div>
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
    <th:block th:include="include :: sparkline-js" />
    <script type="text/javascript">
	    // $(document).ready(function () {
	    //     var data2 = [
	    //         [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
	    //         [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
	    //         [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
	    //         [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
	    //         [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
	    //         [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
	    //         [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
	    //         [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
	    //     ];
        //
	    //     var data3 = [
	    //         [gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
	    //         [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
	    //         [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
	    //         [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
	    //         [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
	    //         [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
	    //         [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
	    //         [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
	    //     ];
        //
        //
	    //     var dataset = [
	    //         {
	    //             label: "总负荷",
	    //             data: data3,
	    //             color: "#1ab394",
	    //             bars: {
	    //                 show: true,
	    //                 align: "center",
	    //                 barWidth: 24 * 60 * 60 * 600,
	    //                 lineWidth: 0
	    //             }
        //
	    //         }, {
	    //             label: "碳排放",
	    //             data: data2,
	    //             yaxis: 2,
	    //             color: "#464f88",
	    //             lines: {
	    //                 lineWidth: 1,
	    //                 show: true,
	    //                 fill: true,
	    //                 fillColor: {
	    //                     colors: [{
	    //                         opacity: 0.2
	    //                     }, {
	    //                         opacity: 0.2
	    //                     }]
	    //                 }
	    //             },
	    //             splines: {
	    //                 show: false,
	    //                 tension: 0.6,
	    //                 lineWidth: 1,
	    //                 fill: 0.1
	    //             },
	    //         }
	    //     ];
        //
        //
	    //     var options = {
	    //         xaxis: {
	    //             mode: "time",
	    //             tickSize: [3, "day"],
	    //             tickLength: 0,
	    //             axisLabel: "Date",
	    //             axisLabelUseCanvas: true,
	    //             axisLabelFontSizePixels: 12,
	    //             axisLabelFontFamily: 'Arial',
	    //             axisLabelPadding: 10,
	    //             color: "#838383"
	    //         },
	    //         yaxes: [{
	    //                 position: "left",
	    //                 max: 1070,
	    //                 color: "#838383",
	    //                 axisLabelUseCanvas: true,
	    //                 axisLabelFontSizePixels: 12,
	    //                 axisLabelFontFamily: 'Arial',
	    //                 axisLabelPadding: 3
	    //         }, {
	    //                 position: "right",
	    //                 clolor: "#838383",
	    //                 axisLabelUseCanvas: true,
	    //                 axisLabelFontSizePixels: 12,
	    //                 axisLabelFontFamily: ' Arial',
	    //                 axisLabelPadding: 67
	    //         }
	    //         ],
	    //         legend: {
	    //             noColumns: 1,
	    //             labelBoxBorderColor: "#000000",
	    //             position: "nw"
	    //         },
	    //         grid: {
	    //             hoverable: false,
	    //             borderWidth: 0,
	    //             color: '#838383'
	    //         }
	    //     };
        //
	    //     function gd(year, month, day) {
	    //         return new Date(year, month - 1, day).getTime();
	    //     }
        //
	    //     var previousPoint = null,
	    //         previousLabel = null;
        //
	    //     $.plot($("#flot-dashboard-chart"), dataset, options);
	    // });
    </script>

<script  th:inline="javascript">

    var myChart = echarts.init(document.getElementById('flot-dashboard-chart'));

    // 指定图表的配置项和数据
    var option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['负荷', '碳排'],
            textStyle:{					//----图例内容样式
                color:'#fff',				//---所有图例的字体颜色
                //backgroundColor:'black',	//---所有图例的字体背景色
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '负荷',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} kw'
                }
            },
            {
                type: 'value',
                name: '碳排',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} '
                }
            }
        ],
        series: [
            {
                itemStyle: {

                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#1ab394" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#1ab394" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#1ab394" // 100% 处的颜色
                        }], false)
                    ,
                        label: {
                            show: true,     //开启显示
                            position: 'top',    //在上方显示
                            textStyle: {        //数值样式
                                color: 'white',
                                fontSize: 16
                            }
                        }
                    }
                },
                name: '负荷',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' KW';
                    }
                },
                data: [
                    20, 49, 70, 232, 256, 76.7, 135.6, 162.2, 326, 200, 564, 383
                ]
            },

            {
                name: '碳排',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + '';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 4.2, 2.3, 3.4, 23.0, 16.5, 2.0, 3.2]
            }
        ]
    };
    myChart.setOption(option1);
</script>

<script th:inline="javascript">

    var chartDom = document.getElementById('rightorder');
    var myChart = echarts.init(chartDom);
    var option;
    var ROOT_PATH = 'http://localhost';

    const updateFrequency = 2000;
    const dimension = 0;
    const countryColors = {
        Australia: '#00008b',
        Canada: '#f00',
        China: '#ffde00',
        Cuba: '#002a8f',
        Finland: '#003580',
        France: '#ed2939',
        Germany: '#000',
        Iceland: '#003897',
        India: '#f93',
        Japan: '#bc002d',
        'North Korea': '#024fa2',
        'South Korea': '#000',
        'New Zealand': '#00247d',
        Norway: '#ef2b2d',
        Poland: '#dc143c',
        Russia: '#d52b1e',
        Turkey: '#e30a17',
        'United Kingdom': '#00247d',
        'United States': '#b22234'
    };
    $.when(
        $.getJSON(ROOT_PATH + '/system/index/order/data1'),
        $.getJSON(ROOT_PATH + '/system/index/order/data')
    ).done(function (res0, res1) {
        const flags = res0[0];
        const data = res1[0];
        const years = [];
        for (let i = 0; i < data.length; ++i) {
            if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
                years.push(data[i][4]);
            }
        }
        function getFlag(countryName) {
            if (!countryName) {
                return '';
            }
            return (
                flags.find(function (item) {
                    return item.name === countryName;
                }) || {}
            ).emoji;
        }
        let startIndex = 10;
        let startYear = years[startIndex];
        option = {
            grid: {
                top: 10,
                bottom: 30,
                left: 150,
                right: 80
            },
            xAxis: {
                max: 'dataMax',
                axisLabel: {
                    formatter: function (n) {
                        return Math.round(n) + '';
                    }
                }
            },
            dataset: {
                source: data.slice(1).filter(function (d) {
                    return d[4] === startYear;
                })
            },
            yAxis: {
                type: 'category',
                inverse: true,
                max: 10,
                axisLabel: {
                    show: true,
                    fontSize: 14,
                    formatter: function (value) {
                        return value + '{flag|' + getFlag(value) + '}';
                    },
                    rich: {
                        flag: {
                            fontSize: 25,
                            padding: 5
                        }
                    }
                },
                animationDuration: 300,
                animationDurationUpdate: 300
            },
            series: [
                {
                    realtimeSort: true,
                    seriesLayoutBy: 'column',
                    type: 'bar',
                    itemStyle: {
                        color: function (param) {
                            return countryColors[param.value[3]] || '#5470c6';
                        }
                    },
                    encode: {
                        x: dimension,
                        y: 3
                    },
                    label: {
                        show: true,
                        precision: 1,
                        position: 'right',
                        valueAnimation: true,
                        fontFamily: 'monospace'
                    }
                }
            ],
            // Disable init animation.
            animationDuration: 0,
            animationDurationUpdate: updateFrequency,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear',
            graphic: {
                elements: [
                    {
                        type: 'text',
                        right: 160,
                        bottom: 60,
                        style: {
                            text: startYear,
                            font: 'bolder 80px monospace',
                            fill: 'rgba(100, 100, 100, 0.25)'
                        },
                        z: 100
                    }
                ]
            }
        };
        // console.log(option);
        myChart.setOption(option);
        for (let i = startIndex; i < years.length - 1; ++i) {
            (function (i) {
                setTimeout(function () {
                    updateYear(years[i + 1]);
                }, (i - startIndex) * updateFrequency);
            })(i);
        }
        function updateYear(year) {
            let source = data.slice(1).filter(function (d) {
                return d[4] === year;
            });
            option.series[0].data = source;
            option.graphic.elements[0].style.text = year;
            myChart.setOption(option);
        }
    });

    option && myChart.setOption(option);

</script>
</body>
</html>
